<template>
<div>
  <div>
   <!-- 置顶栏 -->
   <div class="RoomMesgTop">
        <van-nav-bar  title="地图找房">
          <template #left>
            <van-icon name="arrow-left" @click="$router.go(-1)"/>
          </template>
        </van-nav-bar>
      </div>
      <!-- 地图盒子 -->
      <div class="map">
        <!-- 地图↓ -->
  <baidu-map class="baidumap"
  :center="CityMap" :zoom="mapObj.zoom"
  :dragging="mapObj.dragging"
  @touchmove="mapTouchmove"
   @touchend="mapTouchend"
   @ready="mapHandler"
   :enableHighResolution="true"
   >
    <!-- 圆形图标↓ -->
    <div >
  <MyOverlay
    pane="labelPane"
    :position="{lng: item.coord.longitude, lat: item.coord.latitude}"
    :active="active"
    :class="{sample: num < 2  ,Pane: num >= 2 , active}"
    :text="item.label"
    :txt="`${item.count}套`"
    v-for="(item,index) in MapList" :key="index"
    @click.native="btn(item)"
    >
  </MyOverlay>
  <div>
  <van-popup v-model="show"  :lock-scroll="false"
  position="bottom" :overlay="false" ref="Pop" >
    <van-cell title="房屋列表"  >
      <template  #default>
        <span @click="$router.push('/layout/findroom')">更多房源</span>
      </template >
    </van-cell>
    <van-card
          :price="`${item.price}元/月`"
          :desc="item.desc"
          :title="item.title"
          class="goods-card"
          centered
          currency
          :thumb="`http://liufusong.top:8080${item.houseImg}`"
          v-for="(item,index) in RecommendedHouse" :key="index"
          @click="HouseOne(item)"
        >
          <template #tags>
            <van-tag
              color="#e1f5f8"
              text-color="#39becd"
              v-for="(itemTag,indexTag) in item.tags" :key="indexTag"
            >{{itemTag}}</van-tag
            >
          </template>
        </van-card>
  </van-popup>
</div>
</div>
  <!-- 比例尺↓ -->
    <bm-scale  anchor="BMAP_ANCHOR_BOTTOM_LEFT" ></bm-scale>
    <bm-control anchor="BMAP_ANCHOR_BOTTOM_RIGHT" >
      <div class="BtnBox">
      <div @click="addZoom(1)" class="jia">+</div>
      <div @click="addZoom(-1)" class="jian">-</div>
    </div>
    </bm-control>
  </baidu-map>
</div>
</div>
</div>
</template>

<script>
import { HousingSourceRequest, HouseRequest } from '@/api'
import MyOverlay from './MyOverlay.vue'
export default {
  name: 'Map',
  data () {
    return {
      // 城市ID
      CityAdd: '',
      // 推荐房子列表
      RecommendedHouse: [],
      // 推荐房屋弹出层
      show: false,
      // 计数
      num: 0,
      // 房源数据
      MapList: [],
      // 地理位置
      circlePath: {
        center: {
          lng: '',
          lat: ''
        },
        radius: 8000
      },
      active: false,
      // 地图配置项
      mapObj: {
        dragging: true, // 允许拖拽
        zoom: 11
      },
      //  BMap类
      BMap: null,
      // 地图实例对象
      map: null
    }
  },
  components: {
    MyOverlay
  },
  async created () {
    this.HousingSource()
    this.mapTouchend()
  },
  methods: {
    // ready事件初始化MAP实例，返回BMap(核心),map(地图实例)
    mapHandler ({ BMap, map }) {
      const _this = this
      _this.BMap = BMap
      _this.map = map
      if (this.$store.state.NowCityOlny[0].value) return
      console.log('我通过了')
      const get = new BMap.Geolocation()
      get.getCurrentPosition(
        function (r) {
          // 将定位到的城市名存入VUEX
          // _this.CityName = r.address.city
          // ↓使用城市名定位
          // _this.CityName = r.address.city
          // 可以conso.log看一下这个r，他里面包含了检索到的位置信息。下面就把两个维度信息赋值给center来定位
          _this.circlePath.center = {
            // 使用坐标定位
            lng: r.point.lng,
            lat: r.point.lat
          }
        },
        // 启用高精度
        { enableHighAccuracy: true }
      )
    },
    async HousingSource () {
      this.$store.state.UserOverlay = true
      this.$bus.$emit('loading')
      try {
        const res = await HousingSourceRequest(this.CityAdd || this.$store.state.NowCityOlny[0].value || this.$store.state.NowCityOlny)
        this.MapList = res.data.body
        console.log(this.MapList)
        // 加载完毕关闭加载窗
        this.$bus.$emit('clear')
        this.$store.state.UserOverlay = false
      } catch (err) {
        this.$bus.$emit('fail')
        this.$store.state.UserOverlay = false
      }
    },
    // 触摸移动时触发此事件
    mapTouchmove (e) {
      this.mapObj.dragging = true
      this.show = false
    },
    // 触摸结束时触发此事件
    mapTouchend (type, target, point, pixel) {
      this.mapObj.dragging = false
    },
    // 地图图标点击
    async btn (item) {
      // 图标点击城市ID赋值
      this.CityAdd = item.value
      console.log(this.CityName)
      // 计数，判断切换类名，触发弹出事件
      this.num++
      if (this.num > 2) {
        this.$store.state.UserOverlay = true
        // 加载状态
        this.$bus.$emit('loading')
        try {
          const res = await HouseRequest({ NewHouse: item.value })
          this.RecommendedHouse = res.data.body.list
          this.$bus.$emit('clear')
          this.show = true
          this.$store.state.UserOverlay = false
        } catch (err) {
          this.$bus.$emit('fail')
          this.$store.state.UserOverlay = false
        }
        return
      }
      // ↓使用坐标定位
      this.circlePath.center.lng = item.coord.longitude
      this.circlePath.center.lat = item.coord.latitude
      // 重新调用接口
      this.HousingSource()
      // 重置地图
      // this.map.reset()
      // 清除覆盖物
      this.map.clearOverlays()
      // 当前缩放等级
      const num = this.map.getZoom()
      // // 放大一级
      this.mapObj.zoom = num + 2
    },
    // 缩放按钮
    addZoom (Zoom) {
      this.mapObj.zoom += Zoom
    },
    // 进入当前房屋详情
    HouseOne (item) {
      this.$router.push({
        name: 'detail'
      })
      this.$store.commit('houseId', item.houseCode)
    }
  },
  computed: {
    CityMap () {
      return this.circlePath.center.lng !== '' ? this.circlePath.center : this.$store.state.NowCityOlny[0].label
    }
  }
}
</script>

<style lang="less" scoped>
  .baidumap {
  width: 100%;
  height: 620px;
}
.van-nav-bar {
  background-color: #21b97a;
  /deep/ .van-icon {
    color: #fff;
  }
  /deep/ .van-nav-bar__title {
    color: #fff;
  }
}
.sample {
  width: 50px;
  height: 50px;
  line-height: 20px;
  background-color: rgb(35, 187, 120,0.9);
  overflow: hidden;
  box-shadow: 0 0 5px rgb(255, 255, 255);
  color: #fff;
  text-align: center;
  padding: 10px;
  position: absolute;
  border-radius: 50%;
  font-size: 12px;
  border: 2px solid #fff;
}
.Pane {
  width: 100px;
  height: 20px;
  line-height: 20px;
  background-color: rgb(35, 187, 120,0.9);
  box-shadow: 0 0 5px rgb(255, 255, 255);
  color: #fff;
  text-align: center;
  position: absolute;
  font-size: 10px;
  display: flex;
 /deep/ div {
  display: inline;
  }
 /deep/ span {
  display: inline-block;
  padding-right: 3px;
  width:70px;
  overflow: hidden;

  }
}
.sample.active {
  background: rgba(0,0,0,0.75);
  color: #fff;
}
.van-popup{
  height:300px;
}
/deep/ .van-cell__value{
  color:#333;
}
/deep/ .van-card__price-integer {
  color: red;
  font-weight: 700;
}
/deep/ .van-cell{
  position:sticky;
  top: 0;
  z-index: 100;
}
.BtnBox{
  margin:0 10px 25px 0;
  display:flex;
  flex-direction: column;
  width:35px;
  height:70px;
  line-height:35px;
  text-align: center;
  border: 0 solid #fff;
  background: rgba(252, 252, 252, 0.75);
color:#676d73;
box-shadow: 1px 1px 5px rgb(168, 168, 168);
font-size: 30px;
}
</style>
